<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <style>
        #main-content{
            height: 100%;
        }

        .layui-nav-side{
            top: 60px;
            border-top-left-radius: 0;
        }
        .layui-nav{
            border-bottom-left-radius: 0;
        }
        #top-nav{
            width: 100%;
            height: 60px;
            background-color: rgb(57,61,73);

        }
        #top-right-nav{
            position: absolute;
            left: 200px;
            right: 0px;
        }
        #logo{
            position: absolute;
            line-height: 60px;
            font-size: 25px;
            width: 200px;
            height: 60px;
            text-align: center;
            color: #e3e3e3;
        }
        #target-container{
            position: absolute;
            left: 200px;
            top: 60px;
            right: 0px;
            bottom: 0px;
            box-sizing: border-box;
        }
        #inner{
            border:0;
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

    </style>
</head>
<body onload="init()">
<div id="top-nav">
    <span id="logo">语扉后台</span>
<div id="top-right-nav">
<ul class="layui-nav">
    <li class="layui-nav-item layui-this"><a href="">选中</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">常规</a>
    </li>
</ul>
</div>
</div>
<div id="main-content">
<ul class="layui-nav layui-nav-tree layui-nav-side">
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="javascript:;">选项3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">默认收缩</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="javascript:;">选项3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
    <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
    <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
</ul>
    <div id="target-container">
    <iframe id="inner" name="__inner" src="area/list.html">

    </iframe>
    </div>
</div>
<script src="../../lib/jquery-3.7.0.js"></script>
<script src="../../lib/layui/layui.js"></script>
<script src="../js/index.js"></script>
</body>
</html>